﻿@{
    ViewBag.Title = "系统管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section ScriptAndCss{
    <script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/exporting.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/multiSelect/jquery.bgiframe.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/multiSelect/jquery.multiSelect.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Scripts/multiSelect/jquery.multiSelect.css")" rel="stylesheet" type="text/css" />
}
<script type="text/javascript">

    function percentFormat() {
        return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%Y-%m-%d', this.x) + ' : ' + this.y.toFixed(1) + '%';
    }

    function capacityFormat() {
        return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%Y-%m-%d', this.x) + ' : ' + this.y.toFixed(1);
    }

    function loadchart(newValue) {
        var values = "";
        var items = $(newValue).val();
        for (var item in items) {
            values += items[item] + ",";
        }
        var url = '@Url.Action("GetPerformanceByDeviceIDAndParameterDisplay", "SystemManagement")';
        var option = {
            chart: {
                renderTo: 'p_container',
                type: 'spline'
            },
            exporting: { enabled: false },
            title: {
                text: ''
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%Y/%m/%d' //http://php.net/manual/en/function.strftime.php
                },
                labels: {
                    rotation: -45,
                    align: 'right'
                }
            },
            yAxis: {
                title: {
                    text: ''
                },
                //tickWidth:10,
                //tickInterval: 25,
                tickPositions: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] // 指定竖轴坐标点的值
            },
            legend: {
                enabled: true
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d', this.x) + ': ' + (this.y * 100).toFixed(1) + '%';
                }
            },
            series: []
        };
        $.post(url,
            {
                DeviceID: $('#c_device_id').val(),
                Param: values,
                Start: $('#c_starttime').datebox('getValue'),
                End: $('#c_endtime').datebox('getValue')
            },
            function (result) {

                for (var i = 0; i < result.series.length; i++) {

                    var serire = new Object();
                    serire.name = result.series[i].name;
                    serire.data = result.series[i].data;

                    if (result.unit != undefined) {
                        if (result.unit == '%') {
                            option.yAxis.title = '%';
                            option.tooltip.formatter = percentFormat;
                        }
                        else {
                            option.yAxis.title = result.unit;
                            option.tooltip.formatter = capacityFormat;
                        }
                    }
                    option.series.push(serire);
                }

                var chart = new Highcharts.Chart(option);
            }
        );

    }

    //$('div .multiSelect').on("focusout", function () {
    //    var values = $('input .multiSelect_txt').val();
    //    loadchart(this.value);
    //});

    //$('input .multiSelect_txt').change(function () {
    //    loadchart(this.value);
    //});

    function reloadAllDevice() {
        $('#c_device_id_for_table').val('');
        $('#t_alert').datagrid('load');
    }

    function addmydevice() {
        $.post('/SystemManagement/AddDevice',
        {
            DeviceId: $('#c_device_id').val()
        },
        function (data) { alert(data); });

    }

    function rmmydevice() {
        $.post('/SystemManagement/RmDevice',
        {
            DeviceId: $('#c_device_id').val()
        },
        function (data) { alert(data); });

    }

    $(function () {
        $('#c_clear').linkbutton({
            plain: false
        });

        $('#c_starttime').datebox({
            currentText: '今天',
            closeText: '关闭',
            onSelect: function (date) {
                //alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
                loadchart($('#c_parameter').val());
            }
        });


        $('#c_endtime').datebox({
            currentText: '今天',
            closeText: '关闭',
            onSelect: function (date) {
                //alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
                loadchart($('#c_parameter').val());
            }
        });

        $('#c_clear').click(function () {
            $('#c_endtime').datebox('setValue', '');
            $('#c_starttime').datebox('setValue', '');
            loadchart($('#c_parameter').val());
        });

        $('#tree').tree({
            url: '@Url.Action("GetBusinessList", "SystemManagement")',
            onSelect: function (node) {
                $('#c_device_id').val(node.id).change();
                $('#c_device_id_for_table').val(node.id).change();
            },
            onLoadSuccess: function () {
                var treeroot = $('#tree').tree('getRoots');
                var children = $('#tree').tree('getChildren', treeroot[0].target);
                if (children.length > 0) {
                    $('#tree').tree('select', children[0].target);
                }
                else {
                    var children11 = $('#tree').tree('getChildren', treeroot[1].target);
                    var children12 = $('#tree').tree('getChildren', children11[0].target);
                    $('#tree').tree('select', children12[0].target);
                }
            },
            onContextMenu: function (e, node) {
                e.preventDefault();
                // select the node
                $('#tree').tree('select', node.target);
                if (node.attributes && node.attributes["isMyDevice"]) {
                    $('#rm_mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                } else {
                    // display context menu
                    $('#add_mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            }
        });

        $('#c_device_id').change(function () {
            var url = '@Url.Action("GetPerformanceParametersByDeviceID", "SystemManagement")';
            $.post(url, { DeviceID: $(this).val() },
            function (result) {
                var options = [];
                $.each(result, function (index, content) {
                    options.push("<option value='" + content.value + "'>" + content.lable + "</option>");
                });
                $('#c_parameter').html(options.join(''));
                $('#c_parameter').change();

                //$("#c_parameter option:first").prop("selected", 'selected');
                //var per1 = $("#c_parameter").find("option:selected").text();
                //loadchart(this);
                //$('#c_parameter').multiSelect({ oneOrMoreSelected: '*' });
            });

        });

        $('#c_device_id_for_table').change(function () {
            if ($('#c_device_id_for_table').val() != '') {
                $('#t_alert').datagrid('load');
            }
        });


        $('#t_alert').datagrid({
            url: 'GetAlertByDeviceId',
            singleSelect: true,
            //fitColumns: true,
            title: '告警信息',
            fit: true,
            pagination: true,
            toolbar: '#tbl-buttons',
            columns: [[
                { field: 'Msg', title: '警告信息', width: 300 },
                {
                    field: 'Timestamp', title: '产生时间', width: 150, sortable: true,
                    formatter: function (value, row, index) {
                        //                        var d = new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
                        //                        return $.datepicker.formatDate('yy-mm-dd', d);
                        return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
                    }
                },
                { field: 'Host', title: '主机', width: 110, sortable: true }
            ]],
            onBeforeLoad: function (param) {
                param.DeviceId = $('#c_device_id_for_table').val();
            },
            rowStyler: function (index, row) {
                if (row.Severity == 2) {
                    return 'background-color:#c63c26;color:#fff;';
                }
                else if (row.Severity == 1) {
                    return 'background-color:#FFCC00;color:#fff;';
                }
                else if (row.Severity == 0) {
                    return 'background-color:#66CC00;color:#fff;';
                }
            }
        });
        var p = $('#t_alert').datagrid('getPager');

        $(p).pagination({
            beforePageText: '第',

            afterPageText: '页    共 {pages} 页',

            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'

        });
    });



</script>
<div data-options="region:'center'" style="width: 100%; height: 100%;">
    <div class="easyui-layout" fit="true" style="height: 100%; margin: 0 auto;">
        <div style="width: 20%; height: 100%; position: absolute;border:solid 1px #95B8E7;margin:5px 0;overflow:scroll;">
            <div id="tree_container" data-options="region:'west'" fit="true">
                <ul id="tree">
                </ul>
                <div id="add_mm" class="easyui-menu">
                    <div onclick="addmydevice();" data-options="iconCls:'icon-add'">
                        添加到我的设备
                    </div>
                </div>
                <div id="rm_mm" class="easyui-menu">
                    <div onclick="rmmydevice();" data-options="iconCls:'icon-remove'">
                        从我的设备移除
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 80%; height: 100%; position: absolute;left:20%">
            <div id="rigth_container" data-options="region:'center'" style="height:100%;padding:0 5px;" fit="true">
                <div style="height: 50%;">
                    <label>性能指标</label>
                    <input id="c_device_id" type="hidden" />
                    <input id="c_device_id_for_table" type="hidden" />
                    <select id="c_parameter" onchange="loadchart(this);" style="width: 200px; height: 36px" multiple="multiple">
                    </select>&nbsp;
            <label>开始时间</label><input id="c_starttime" />
                    &nbsp;
            <label>结束时间</label><input id="c_endtime" />
                    <a id="c_clear">重置时间</a>
                    <div id="p_container" style="width: 100%; height: 85%; margin: 5px,5px,0px,0px;">
                    </div>
                </div>
                <div style="height: 50%;">
                    <table id="t_alert" fit="true" style="width: auto;">
                    </table>
                </div>
            </div>
        </div>
        <div id="tbl-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-reload" plain="true"
                onclick="reloadAllDevice()">显示所有</a>
        </div>
    </div>
</div>
